import React from 'react';
import {Text,View,Image,StatusBar,Swiper} from 'react-native';
import styles from  './style';
import Video from 'react-native-video';
import Utils from  '../utils';

class Intro extends React.Component{
    render(){
        return(<View style={styles.backgroundFixed}>
            <View style={styles.logo}>
                <View style={styles.logoIconContainer}>
                    <Icon name="" size={60} color="white"></Icon>
                </View>
                <View style={styles.logoTextContainer}><Text style={styles.logoText}>Spotify</Text></View>
            </View>
            <View style={styles.slider}>
                <Swiper height={Utils.size.height-200} showsButtons={false} autoplay={false}
                    dot={<View style={{background:'rgba(255,255,255,0.2)',width:6,height:6,borderRadius:3,marginLeft:3,marginRight:3,marginTop:3,marginBottom:3}}></View>}
                    activeDot={<View style={{background:'rgba(255,255,255,1)',width:6,height:6,borderRadius:3,marginLeft:3,marginRight:3,marginTop:3,marginBottom:3}}/>}
                >
                    <View style={styles.slide}>
                        <Text style={styles.slideTextTitle}>Welcome</Text>
                        <Text style={styles.slideText}>Sign up for free music on your phone,tablet</Text>
                        <Text style={styles.slideText}>and computer.</Text>
                    </View>
                     <View style={styles.slide}>
                        <Text style={styles.slideTextTitle}>Browse</Text>
                        <Text style={styles.slideText}>Explore top tracks, new releases and the right</Text>
                        <Text style={styles.slideText}>playlist for every moment</Text>
                    </View>
                     <View style={styles.slide}>
                        <Text style={styles.slideTextTitle}>Search</Text>
                        <Text style={styles.slideText}>Looking for that special album or artist? Just</Text>
                        <Text style={styles.slideText}>search and hit play!</Text>
                    </View>
                     <View style={styles.slide}>
                        <Text style={styles.slideTextTitle}>Running</Text>
                        <Text style={styles.slideText}>Music that perfectly matches</Text>
                        <Text style={styles.slideText}>your tempo.</Text>
                    </View>
                     <View style={styles.slide}>
                        <Text style={styles.slideTextTitle}>Your Library</Text>
                        <Text style={styles.slideText}>Save any song,album or artist to your own</Text>
                        <Text style={styles.slideText}>music collection.</Text>
                    </View>
                </Swiper>
            </View>
            <View style={styles.btnContainer}>
                <TouchableHighlight style={[styles.btn,{backgroundColor:"#201437"}]}>
                    <Text style={styles.btnText}>LOG IN</Text>
                </TouchableHighlight>
                <TouchableHighlight style={[styles.btn,{backgroundColor:"#29b859"}]}>
                    <Text style={styles.btnText}>SIGN out</Text>
                </TouchableHighlight>
            </View>
        </View>)
    }
}

export default class  extends React.Component{
    componentDidMount(){
        StatusBar.setStyle(1);
    }
    render(){
        return(<View style={styles.container}>
            <Video source={{uri:'moments'}} style={styles.backgroundFixed} resizeMode="cover" repeat={true} key="video1"><Intro/></Video>
        </View>)
    }
}